<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!--Extjs version 6.2.0 -->
<link href="css/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="locale/locale-zh_CN.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
	Ext.onReady(function() {
		Ext.define('User', {
			extend : 'Ext.data.Model',
			fields : [ {
				name : 'id',
				mapping : 'id'
			}, {
				name : 'name',
				mapping : 'name'
			} ]
		});

		var store = Ext.create('Ext.data.Store', {
			model : 'User',
			proxy : {
				type : 'ajax',
				url : 'getData',
				reader : {
					type : 'json'
				}
			},
			autoLoad : true
		});

		var combobox = new Ext.form.ComboBox({
			renderTo : Ext.getBody(),
			triggerAction : "all",
			store : store,
			editable : false,
			displayField : "name",
			valueField : "id",
			mode : "remote", //数据来本地local 来之远程服务器用remote  
			emptyText : "请选择列表城市"
		});

		var btn = new Ext.Button({
			text : "列表框的值",
			renderTo : Ext.getBody(),
			handler : function() {
				Ext.Msg.alert("城市", "展示值:" + combobox.getValue() + "; 后端值："
						+ combobox.getRawValue());
			}
		});

	});
</script>
</head>

<body>

</body>

</html>